<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderCustomList('小E信息和记录',~{::link})">
    <link rel="stylesheet" href="https://hnres.etalk365.com/public/lib/layui/css/layui.css">
</head>
<style>
    .layui-laypage .layui-laypage-curr .layui-laypage-em{
        background-color: #2fa4e7;
    }
</style>
<body >
<div class="ch-container" style="padding-left:15px;">
    <div class="row" >
        <div id="content" class="col-md-12 col-sm-12" style="padding:0px;">
            <!--小E记录-->
            <div class="box-inner" id="xiaoEInfo" style="margin-bottom: 5px;margin-left: 5px;margin-right: 5px;">
                <table class="table table-bordered" style="margin-bottom: 0;">
                    <thead>
                    <tr>
                        <th class="text-center">小E形象</th>
                        <th class="text-center">开启小E</th>
                        <th class="text-center">小E等级</th>
                        <th class="text-center">经验值</th>
                        <th class="text-center">历史星星数</th>
                        <th class="text-center">现有星星数</th>
                        <th class="text-center">本周星星数</th>
                        <th class="text-center">礼券数</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="content">
                        <td class="text-center" style="vertical-align: middle;">
                            <img class="epicture" src="" width="100"/>
                        </td>
                        <td class="isOpen text-center" style="vertical-align: middle;background-color: white;"></td>
                        <td class="level text-center" style="vertical-align: middle;background-color: white;"></td>
                        <td class="experience text-center" style="vertical-align: middle;background-color: white;"></td>
                        <td class="starNumHistory text-center"
                            style="vertical-align: middle;background-color: white;"></td>
                        <td class="starNumNow text-center" style="vertical-align: middle;background-color: white;"></td>
                        <td class="starNumWeek text-center"
                            style="vertical-align: middle;background-color: white;"></td>
                        <td class="ticket text-center" style="vertical-align: middle;background-color: white;"></td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="8" style="background-color: white;"><a style="font-size:18px;" target="_blank"
                                                                            href="https://shimo.im/docs/hVst8bDzamsIOEqk"><strong>小E使用手册图解>></strong></a>
                        </td>
                    </tr>
                    </tfoot>
                </table>
                <!-- </div>-->
            </div>
            <!--礼券记录-->
            <div class="col-md-3 col-sm-4" style="margin-bottom:10px;padding: 0 5px;">
                <div class="box-inner " id="giftRecord">
                    <div class="box-header well">
                        <h2>
                            <i class="glyphicon glyphicon-th"></i> 兑换券获取记录
                        </h2>
                    </div>
                    <div class="box-content" style="padding:0px 2px;">
                        <table class="table table-striped table-bordered table-hover" style="margin-bottom: 0px;">
                            <thead>
                            <tr>
                                <th>获取方式</th>
                                <th>数量</th>
                                <th>记录时间</th>
                            </tr>
                            </thead>
                            <tbody class="dataItem"></tbody>
                        </table>
                        <div class="eRecordPage"></div>
                    </div>
                </div>
            </div>
            <!--兑换礼物记录-->
            <div class="col-md-3 col-sm-4" style="margin-bottom:10px;padding: 0 5px;">
                <div class="box-inner " id="exchangeRecord">
                    <div class="box-header well">
                        <h2>
                            <i class="glyphicon glyphicon-th"></i> 兑换礼物记录
                        </h2>
                    </div>
                    <div class="box-content" style="padding:0px 2px;">
                        <table class="table table-striped table-bordered table-hover" style="margin-bottom: 0px;">
                            <thead>
                            <tr>
                                <th>礼品名称</th>
                                <th>数量</th>
                                <th>状态</th>
                                <th>记录时间</th>
                            </tr>
                            </thead>
                            <tbody class="dataItem"></tbody>
                        </table>
                        <div class="eRecordPage"></div>
                    </div>
                </div>
            </div>
            <!--星星记录-->
            <div class="col-md-3 col-sm-4" style="margin-bottom:10px;padding: 0 5px;">
                <div class="box-inner" id="starRecord">
                    <div class="box-header well">
                        <h2>
                            <i class="glyphicon glyphicon-th"></i> 星星获取记录
                        </h2>
                    </div>
                    <div class="box-content" style="padding:0px 2px;">
                        <table class="table table-striped table-bordered table-hover" style="margin-bottom: 0px;">
                            <thead>
                            <tr>
                                <th>获取方式</th>
                                <th>数量</th>
                                <th>记录时间</th>
                            </tr>
                            </thead>
                            <tbody class="dataItem"></tbody>
                        </table>
                        <div class="eRecordPage"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-4" style="margin-bottom:10px;padding: 0 5px;">
                <!--经验记录-->
                <div class="box-inner" id="empiricRecord">
                    <div class="box-header well">
                        <h2>
                            <i class="glyphicon glyphicon-th"></i> 经验获取记录
                        </h2>
                    </div>
                    <div class="box-content" style="padding:0px 2px;">
                        <table class="table table-striped table-bordered table-hover" style="margin-bottom: 0px;">
                            <thead>
                            <tr>
                                <th>获取方式</th>
                                <th>数量</th>
                                <th>记录时间</th>
                            </tr>
                            </thead>
                            <tbody class="dataItem"></tbody>
                        </table>
                        <div class="eRecordPage"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include/onload_js::onloadJSCustomList(~{::script})">
    <script src="https://hnres.etalk365.com/public/lib/layui/layui.js"></script>
    <script type="text/javascript">
        /**
         * 获取小E信息
         */
        let httpUrl="[[${eMsgUrl}]]";
        let personId="[[${personId}]]";
        function getEmsgStatus() {
            let url = httpUrl+'/backstage/interface/crm/master/' + personId;
            $.get(url,{},function (result) {
                if (result.status === 1) {
                    if (result.data !== null) {
                        $('#xiaoEInfo table .epicture').attr('src', result.data.thumbnailImage);
                        $('#xiaoEInfo table .isOpen').text(result.data.status === 0 ? '已开启' : '未开启');
                        $('#xiaoEInfo table .level').text(result.data.level.level + '级(' + result.data.level.name + ')');
                        $('#xiaoEInfo table .experience').text(result.data.experience);
                        $('#xiaoEInfo table .starNumHistory').text(result.data.historyStar);
                        $('#xiaoEInfo table .starNumNow').text(result.data.weekStar);
                        $('#xiaoEInfo table .starNumWeek').text(result.data.rankStar==null?0:result.data.rankStar);
                        $('#xiaoEInfo table .ticket').text(result.data.ticket);
                    }else {
                        $('#xiaoEInfo table .content').empty();
                        $('#xiaoEInfo table .content').append("<td colspan='8'>没有小e信息哦~</td>");
                    }
                }
            })
        }

        /**
         * 获取小E记录信息
         * @param pageNum 当前页码
         * @param typeId 记录类型
         * @param tagId 加载数据的节点id
         */
        function getERecordData (pageNum,typeId,tagId) {
            let url = httpUrl+'backstage/interface/crm/record/received/' + personId;
            let data={
                startTime: 0,
                endTime: 15268943940000,
                page: pageNum,
                size: '',
                type: typeId
            };
            console.log(url);
            console.log(data);
            $.get(url,data,function (result) {
                let methodName = [];
                console.log(result);
                if (result.status === 1) {
                    if (pageNum === 1) {
                        layui.use('laypage', function(){
                            let laypage = layui.laypage;
                            laypage.render({
                                elem: $('#'+tagId+' .eRecordPage') //注意，这里的是 ID，不用加 # 号
                                ,count: result.total //数据总数，从服务端得到
                                ,groups: 3
                                ,jump: function(obj, first){
                                    //obj包含了当前分页的所有参数，比如：
                                    // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                    // console.log(obj.limit); //得到每页显示的条数
                                    //首次不执行
                                    if(!first){
                                        //do something
                                        getERecordData(obj.curr,typeId,tagId);
                                    }
                                }
                            });
                        });
                    }

                    switch (typeId) {
                        case 0:
                            methodName = ['上课', '挖宝', '使用特权卡', '超级词场活动奖励'];
                            break
                        case 1:
                            methodName = ['签到', '评价', '挖币', '推荐注册', '推荐试听', '帮好友签到'];
                            break
                        case 2:
                            methodName = ['星星挖宝获得', '兑换礼物扣除', '取消兑换时返回', '使用特权卡获得', '活动获得','转介绍获得','转赠好友扣除','好友赠送获得','系统误送收回'];
                            break;
                        case 3:
                            methodName = ['待兑换', '待收货', '已完成','已取消'];
                            break;
                    }
                    bindData(result.data, methodName,tagId,typeId);
                }
            },"json");
        }

        /**
         * 加载数据到节点
         * @param dataArr 数据
         * @param methodName 记录中的获取方式字典
         * @param tagId 加载数据的节点id
         * @param typeId 类型id
         */
        function bindData (dataArr, methodName,tagId,typeId) {
            $('#'+tagId+' .dataItem').empty();
            if (typeId===3){
                let htmlstr = '';
                for (let i = 0; i < dataArr.length; i++) {
                    htmlstr = '<tr class="content">';
                    htmlstr += '<td class="method">' + dataArr[i].name + '</td>';
                    htmlstr += '<td class="buyQuantity">' + dataArr[i].buyQuantity + '</td>';
                    if (dataArr[i].status >= 0) {
                        htmlstr += '<td class="method">' + methodName[dataArr[i].status] + '</td>'
                    } else {
                        htmlstr += '<td class="method">未知</td>'
                    }
                    let time = formatDate(new Date(dataArr[i].createAt));
                    htmlstr += '<td class="classTime">' + time + '</td>';
                    htmlstr += '</tr>';
                    $('#'+tagId+' .dataItem').append(htmlstr);
                }
            } else {
                for (let i = 0; i < dataArr.length; i++) {
                    let htmlstr = ''
                    htmlstr += '<tr class="content">'
                    if (dataArr[i].method >= 0) {
                        htmlstr += '<td class="method">' + methodName[dataArr[i].method] + '</td>'
                    } else {
                        htmlstr += '<td class="method">等级提升</td>'
                    }
                    let time = (dataArr[i].classTime) && (dataArr[i].classTime !== -1) ? formatDate(new Date(dataArr[i].classTime)) : formatDate(new Date(dataArr[i].createAt));
                    htmlstr += (dataArr[i].star && dataArr[i].star !== '') ? '<td class="star">' + dataArr[i].star + '</td><td class="classTime">' + time + '</td>' : '';
                    htmlstr += (dataArr[i].experience >= 0 && dataArr[i].experience !== '') ? '<td class="experience">' + dataArr[i].experience + '</td><td class="classTime">' + time + '</td>' : '';
                    htmlstr += (dataArr[i].ticket && dataArr[i].ticket !== '') ? '<td class="ticket">' + dataArr[i].ticket + '</td><td class="classTime">' + time + '</td>' : '';
                    htmlstr += '</tr>';
                    $('#'+tagId+' .dataItem').append(htmlstr)
                }
            }
            $('#'+tagId+' .dataItem').show('fast')
        }
        // 时间格式化
        function formatDate(now) {
            let year = now.getFullYear(),
                month = now.getMonth() + 1,
                date = now.getDate(),
                hour = now.getHours(),
                minute = now.getMinutes(),
                second = now.getSeconds();
            return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
        }

        /**
         * 页面加载完成后初始化方法
         */
        $(function () {
            getEmsgStatus();
            getERecordData(1,0,"starRecord");
            getERecordData(1,1,"empiricRecord");
            getERecordData(1,2,"giftRecord");
            getERecordData(1,3,"exchangeRecord");
        })
    </script>
</div>
</body>
</html>